<template>
  <div class="fc_style">
    <div class="fc_button">
      <el-button-group>
        <el-button>导入JSON</el-button>
        <el-button type="primary">导入Options</el-button>
        <el-button type="success" @click="getJson">生成JSON</el-button>
        <el-button type="warning" @click="geOptions">生成Options</el-button>
        <el-button type="danger" @click="showTemplate">生成组件</el-button>
      </el-button-group>
    </div>
    <div class="fc_div"><fc-designer ref="designer" @getJson="getJson" /></div>
    <yu-dialog :data="editDilog" v-model:isShow="eidt">
      <yu-ace-editor
        :data="editorStr"
        lang="json"
        v-model:value="editorStr"
        @handleCells="handleCells"
        @handleFormat="handleFormat"
        height="500px"
      ></yu-ace-editor>
    </yu-dialog>
    <el-dialog title="aa" v-model="state">
      <div ref="editor" v-if="state"></div>
      <span style="color: red" v-if="err">输入内容格式有误!</span>
      <span slot="footer" class="dialog-footer" v-if="type > 2">
        <el-button @click="state = false" size="small">取 消</el-button>
        <el-button type="primary" @click="onOk" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs, onMounted, getCurrentInstance } from 'vue';
const editDilog = ref({ title: '' });
const editorStr = ref();
const eidt = ref(false);
const designer = ref();
const state = ref(false);
const type = ref(2);

const getJson = () => {
  eidt.value = true;
  console.log(designer.value.getJson());
  editDilog.value.title = '生成JSON数据';
  editorStr.value = JSON.stringify(
    JSON.parse(designer.value.getJson()),
    null,
    2
  );
};
const geOptions = () => {
  debugger;
  eidt.value = true;
  console.log(designer.value.getOption());
  editDilog.value.title = '生成Options';
  editorStr.value = JSON.stringify(designer.value.getOption(), null, 2);
};

const showTemplate = () => {
  debugger;
  state.value = true;
  type.value = 2;
  let ss = makeTemplate();
};
const makeTemplate = () => {
  const rule = designer.value.getRule();
  const opt = designer.value.getOption();
  return `<template> <form-create
    v-model="fapi"
    :rule="rule"
    :option="option"
    @submit="onSubmit"
  ></form-create>
</template>`;
};
</script>
<style lang="scss" scoped>
.fc_style {
  height: 100%;
  .fc_button {
    text-align: end;
    width: 100%;
    height: auto !important;
  }
  .fc_div {
    height: 800px !important;
  }
}
</style>
